<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <link th:href="@{/css/update.css}" rel="stylesheet"/>
    <th:block th:include="include :: header('上传')" />
    <link th:href="@{/ajax/libs/bootstrap-fileinput/fileinput.min.css}" rel="stylesheet"/>
</head>
<body class="">
    <div class="main-content ">
        <form class="form-horizontal" id="form-test-add">
            <input th:value="${files}" id="files" hidden/>
            <input id="initialPreview" hidden/>
            <input id="initialPreviewConfig" hidden/>
            <div class="row" >
                <div class="col-sm-6" style="margin-left: 430px;">
                    <div class="form-group">
                        <label class="font-noraml">上传授权文件</label>
                        <div class="file-loading">
                            <input id="fileinput-demo-1" type="file" multiple data-min-file-count="1" data-theme="fas">
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <th:block th:include="include :: footer" />
    <script th:src="@{/ajax/libs/bootstrap-fileinput/fileinput.min.js}"></script>


    <script th:inline=="javascript">
        var prefix = ctx + "auth"
        $("#form-test-add").validate({
            focusCleanup: true
        });

        function submitHandler() {
            $.modal.close();
        }

        $(document).ready(function () {
            var control = $('#fileinput-demo-1');
            control.fileinput({
                language: 'zh', //设置语言
                uploadUrl: prefix + '/upload', //上传的地址
                deleteUrl: prefix + '/removeFile',//删除图片地址
                allowedFileExtensions : ['licence'],//接收的文件后缀
                showUpload: true, //是否显示上传按钮
                showCaption: true,//是否显示标题
                browseClass: "btn btn-primary", //按钮样式
                previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
                preferIconicPreview: true,
                overwriteInitial: false,//覆盖初始化
                showRemove: false, //是否显示清除按钮
                autoReplace: true,
                enctype: 'multipart/form-data',
                showPreview: false
            });
            //files为fileinput控件ID，
            $('#fileinput-demo-1').on('fileuploaded', function (e, data, previewId, index) {
                //在上传成功事件中将服务器返回的所需数据，添加到该文件对应的div中
                $('#' + previewId).attr('fileId', data.response.fileId);
                layer.alert("授权文件上传成功, 确定跳转至登录页", function () {
                    window.location.href = ctx + "login";
                })
            }).on('filesuccessremove', function (event, previewId, extra) {
                //在移除事件里取出所需数据，并执行相应的删除指令
                var id = $('#' + previewId).attr('fileId');
                console.log(event)
                console.log(previewId)
                deleteFile(id);
            }).on('filedeleted', function (event, key) {
                console.log("key",key);
            });
        });

            function deleteFile(id){
                var formdata = new FormData();
                formdata.append("key", id);
                $.ajax({
                    url: prefix + '/removeFile',
                    data: formdata,
                    type: "post",
                    processData: false,
                    contentType: false,
                    success: function(result) {

                    }
                })
            }

    </script>
</body>
</html>